<template>
    <div class="common-layout">
        <el-container>
            <el-header style="height: 20%;">
                <el-container>
                    <el-aside width="250px">
                        <img class="rounded-image" :src="formurl" style="max-width: 200px;max-height: 250px;;" />
                    </el-aside>
                    <el-main>
                        <p style="color: black;">
                        <h1 style="font-size: x-large;font-weight: 600;">{{ form.productName }}</h1>
                        <span>生产批次: {{ form.productionBatch }}</span>
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        <span>保质期：{{ form.shelfLife }} 天</span><br>
                        <span>生产许可证号：{{ form.licenseNumber }}</span>&emsp;&emsp;
                        <span>生产企业：{{ form.enterprise }}</span><br>
                        <p style="font-weight: 600;">产品检验报告：</p>
                        <el-upload v-model:file-list="fileList"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                        <el-dialog v-model="dialogVisible">
                            <img w-full :src="dialogImageUrl" alt="Preview Image" />
                        </el-dialog>
                        </p>
                    </el-main>
                    <el-aside width="0">Aside</el-aside>
                </el-container>
            </el-header>
            <el-main style="width: 60%;">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="养殖信息" name="first">养殖信息</el-tab-pane>
                    <el-tab-pane label="屠宰信息" name="second">屠宰信息</el-tab-pane>
                    <el-tab-pane label="深加工信息" name="third">深加工信息</el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
import axios from 'axios';
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { reactive, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessageBox } from 'element-plus'
import type { TabsPaneContext } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
const activeName = ref('first')
const router = useRouter()
const route = useRoute()
//#region  详情显示分页 
const tableData = ref([])
const formurl = ref('');
const form = reactive({
    productId: "",
    productCode: "",
    productName: "",
    productionBatch: "",
    shelfLife: "",
    licenseNumber: "",
    enterprise: "",
    url: "",
})
const xianshi = () => {
    axios.get("http://localhost:18675/api/TraceabilityCreadePart/Detail?ProductId=" + route.query.productId)
        .then(res => {
            tableData.value = res.data.data
            formurl.value = res.data.data[0].url
            form.productId = res.data.data[0].productId
            form.productCode = res.data.data[0].productCode
            form.productName = res.data.data[0].productName
            form.productionBatch = res.data.data[0].productionBatch
            form.shelfLife = res.data.data[0].shelfLife
            form.licenseNumber = res.data.data[0].licenseNumber
            form.enterprise = res.data.data[0].enterprise
            form.url = res.data.data[0].url
            console.log(res.data.data);
        })
}
//#endregion

//#region  图片上传 
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const fileList = ref<UploadUserFile[]>([

])
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

//#endregion
onMounted(() => {
    xianshi()
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
} 
</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>